<script lang="ts" setup>
import { reactive, ref } from 'vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnNavbar from '@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue'

import { useAppI18n } from '@/hooks/use-i18n'
import { useUniAppSystemRectInfo } from '@tuniao/tnui-vue3-uniapp/hooks'

const { t } = useAppI18n()
const { navBarInfo } = useUniAppSystemRectInfo()

const userInfo = reactive({
  username: 'testuser',
  email: 'test@example.com',
  phone: '138****8888',
  avatar: '',
  realName: '',
  idCard: '',
  isVerified: false
})

const formData = reactive({
  username: userInfo.username,
  email: userInfo.email,
  phone: userInfo.phone,
  realName: userInfo.realName,
  idCard: userInfo.idCard
})

const isEditing = ref(false)
const showAvatarPicker = ref(false)

// 保存用户信息
const saveUserInfo = () => {
  // 这里可以调用API保存用户信息
  Object.assign(userInfo, formData)
  isEditing.value = false
  
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })
}

// 取消编辑
const cancelEdit = () => {
  Object.assign(formData, userInfo)
  isEditing.value = false
}

// 选择头像
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      userInfo.avatar = res.tempFilePaths[0]
      uni.showToast({
        title: '头像上传成功',
        icon: 'success'
      })
    }
  })
}

// 实名认证
const verifyIdentity = () => {
  if (!formData.realName || !formData.idCard) {
    uni.showToast({
      title: '请先填写真实姓名和身份证号',
      icon: 'none'
    })
    return
  }
  
  uni.showLoading({
    title: '认证中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    userInfo.isVerified = true
    uni.showToast({
      title: '实名认证成功',
      icon: 'success'
    })
  }, 2000)
}

// 绑定手机
const bindPhone = () => {
  uni.showModal({
    title: '绑定手机',
    content: '请输入手机号码',
    editable: true,
    placeholderText: '请输入手机号',
    success: (res) => {
      if (res.confirm && res.content) {
        // 这里可以调用API验证手机号
        userInfo.phone = res.content
        uni.showToast({
          title: '手机绑定成功',
          icon: 'success'
        })
      }
    }
  })
}

// 绑定邮箱
const bindEmail = () => {
  uni.showModal({
    title: '绑定邮箱',
    content: '请输入邮箱地址',
    editable: true,
    placeholderText: '请输入邮箱',
    success: (res) => {
      if (res.confirm && res.content) {
        // 这里可以调用API验证邮箱
        userInfo.email = res.content
        uni.showToast({
          title: '邮箱绑定成功',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<template>
  <view class="account-page">
    <!-- 自定义导航栏 -->
    <TnNavbar
      :fixed="true"
      :transparent="false"
      :title="t('settings.account')"
      :background-color="'#ffffff'"
      :color="'#000000'"
    />
    
    <view class="page-content">
      <view class="page-header">
        <view class="header-title">{{ t('settings.account') }}</view>
      </view>
    
    <!-- 头像设置 -->
    <view class="avatar-section">
      <view class="avatar-container" @tap="chooseAvatar">
        <view v-if="userInfo.avatar" class="avatar-image">
          <image :src="userInfo.avatar" mode="aspectFill" />
        </view>
        <view v-else class="avatar-placeholder">
          <TnIcon name="user-fill" />
        </view>
        <view class="avatar-edit">
          <TnIcon name="camera-fill" />
        </view>
      </view>
      <view class="avatar-text">点击更换头像</view>
    </view>
    
    <view class="account-form">
      <view class="form-item">
        <view class="form-label">用户名</view>
        <view class="form-input">
          <input 
            v-model="formData.username" 
            :disabled="!isEditing"
            placeholder="请输入用户名"
          />
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">邮箱</view>
        <view class="form-input">
          <input 
            v-model="formData.email" 
            :disabled="!isEditing"
            placeholder="请输入邮箱"
            type="email"
          />
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">手机号</view>
        <view class="form-input">
          <input 
            v-model="formData.phone" 
            :disabled="!isEditing"
            placeholder="请输入手机号"
            type="number"
          />
        </view>
        <view class="form-action" @tap="bindPhone">
          <TnButton size="mini" type="primary">绑定</TnButton>
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">邮箱</view>
        <view class="form-input">
          <input 
            v-model="formData.email" 
            :disabled="!isEditing"
            placeholder="请输入邮箱"
            type="email"
          />
        </view>
        <view class="form-action" @tap="bindEmail">
          <TnButton size="mini" type="primary">绑定</TnButton>
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">真实姓名</view>
        <view class="form-input">
          <input 
            v-model="formData.realName" 
            :disabled="!isEditing"
            placeholder="请输入真实姓名"
          />
        </view>
      </view>
      
      <view class="form-item">
        <view class="form-label">身份证号</view>
        <view class="form-input">
          <input 
            v-model="formData.idCard" 
            :disabled="!isEditing"
            placeholder="请输入身份证号"
          />
        </view>
      </view>
    </view>
    
    <!-- 实名认证状态 -->
    <view class="verification-section">
      <view class="verification-status">
        <view class="status-icon" :class="userInfo.isVerified ? 'verified' : 'unverified'">
          <TnIcon :name="userInfo.isVerified ? 'check-fill' : 'close-fill'" />
        </view>
        <view class="status-text">
          <view class="status-title">实名认证</view>
          <view class="status-desc">{{ userInfo.isVerified ? '已认证' : '未认证' }}</view>
        </view>
        <view v-if="!userInfo.isVerified" class="status-action">
          <TnButton size="mini" type="primary" @click="verifyIdentity">立即认证</TnButton>
        </view>
      </view>
    </view>
    
    <view class="action-buttons">
      <TnButton 
        v-if="!isEditing"
        @click="isEditing = true"
        type="primary"
      >
        编辑信息
      </TnButton>
      
      <view v-else class="edit-buttons">
        <TnButton 
          @click="saveUserInfo"
          type="primary"
        >
          保存
        </TnButton>
        <TnButton 
          @click="cancelEdit"
          type="default"
        >
          取消
        </TnButton>
      </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.account-page {
  background-color: var(--tn-color-gray-light);
  min-height: 100vh;
}

.page-content {
  padding: 30rpx;
  padding-top: calc(30rpx + 88px);
}

.page-header {
  margin-bottom: 40rpx;
  
  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: var(--tn-text-color-primary);
  }
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
  
  .avatar-container {
    position: relative;
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 20rpx;
    
    .avatar-image {
      width: 100%;
      height: 100%;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
    
    .avatar-placeholder {
      width: 100%;
      height: 100%;
      background-color: var(--tn-color-gray-light);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80rpx;
      color: var(--tn-text-color-secondary);
    }
    
    .avatar-edit {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50rpx;
      height: 50rpx;
      background-color: var(--tn-color-primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 24rpx;
    }
  }
  
  .avatar-text {
    font-size: 28rpx;
    color: var(--tn-text-color-secondary);
  }
}

.account-form {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .form-item {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid var(--tn-color-gray-light);
    
    &:last-child {
      border-bottom: none;
    }
    
    .form-label {
      width: 200rpx;
      font-size: 32rpx;
      color: var(--tn-text-color-primary);
    }
    
    .form-input {
      flex: 1;
      margin-right: 20rpx;
      
      input {
        width: 100%;
        font-size: 32rpx;
        color: var(--tn-text-color-primary);
        
        &:disabled {
          color: var(--tn-text-color-secondary);
        }
      }
    }
    
    .form-action {
      flex-shrink: 0;
    }
  }
}

.verification-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
  
  .verification-status {
    display: flex;
    align-items: center;
    
    .status-icon {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 20rpx;
      font-size: 32rpx;
      
      &.verified {
        background-color: #52c41a;
        color: #fff;
      }
      
      &.unverified {
        background-color: #ff4d4f;
        color: #fff;
      }
    }
    
    .status-text {
      flex: 1;
      
      .status-title {
        font-size: 32rpx;
        color: var(--tn-text-color-primary);
        margin-bottom: 8rpx;
      }
      
      .status-desc {
        font-size: 26rpx;
        color: var(--tn-text-color-secondary);
      }
    }
    
    .status-action {
      flex-shrink: 0;
    }
  }
}

.action-buttons {
  .edit-buttons {
    display: flex;
    gap: 20rpx;
    
    .tn-button {
      flex: 1;
    }
  }
}
</style> 